<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="xsl">
    <script src="jquery-3.1.1.js"></script>
    <title>商品筛选</title>
    <style>
       *{
           box-sizing: border-box;
       }
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            height: 300px;
            border: 1px solid #ccc;
            font-size: 12px;
            font-family: '微软雅黑';
            margin: 30px auto;
        }
        ul span{
            font-weight: bold;
            display: inline-block;
            width: 120px;
            text-align: right;
            line-height: 40px;
        }
        ul .pai{
            line-height: 30px;
        }
        ul li{
            display:flex;
            height: 40px;
            border-bottom: 1px dashed #ccc;
            line-height: 25px;
        }
        ul li:first-of-type{
            height: 60px;
            line-height: 30px;
        }
        ul li:last-of-type{
            border: none;
        }
        ul li div{
            width: 670px;
            margin-left: 10px;
            padding-right: 30px; 
        }
        p{
            margin: 0;
            cursor: pointer;
            margin: 5px;
            display: inline-block;
            color: #305bb9;
            padding: 0 3px;
        }
        ul li:first-of-type p{
           margin: 0 3px;
        }
        .choose p{
            background-color: #fff;
            border: 1px solid #f62;
            color: #000;
        }
        .choose b{
            display: inline;
            color: #aaa;
            font-weight: lighter;
            padding: 0;
            margin: 0;
        }
        .qc{
            display: none;
            color: #f62;
            text-align: center;
            float: right;
            cursor: pointer;
        }
       .on .clicked{
            background-color: #f62;
            color: snow;
        }
        
    </style>
</head>

<body>
    <ul>
        <li>
            <span class="pai">品牌:</span>
            <div>
                <p>苹果</p>
                <p >小米</p>
                <p >华为</p>
                <p >联想</p>
                <p >中兴</p>
                <p >三星</p>
                <p >魅族</p>
                <p >酷派</p>
                <p >诺基亚</p>
                <p >苹果</p>
                <p >小米</p>
                <p >华为</p>
                <p >联想</p>
                <p >中兴</p>
                <p >三星</p>
                <p >魅族</p>
                <p >酷派</p>
                <p >诺基亚</p>
                <p >苹果</p>
                <p >小米</p>
                <p >华为</p>
                <p >联想</p>
                <p >中兴</p>
                <p >三星</p>
                <p >魅族</p>
                <p >酷派</p>
                <p >诺基亚</p>
            </div>
        </li>
        <li>
            <span>价格:</span>
            <div>
                <p >500元以下</p>
                <p >500-1000元</p>
                <p >1000-1500元</p>
                <p >1500-2000元</p>
                <p >2000-3000元</p>
                <p >3000-4000元</p>
                <p >4000元以上</a>
            </div>
        </li>
        <li>
            <span>主屏尺寸:</span>
            <div>
                <p >6.0英寸以上</p>
                <p >5.5-6.0英寸</p>
                <p >5.0-5.5英寸</p>
                <p >4.5英寸-5.0英寸</p>
                <p >4.0英寸-4.5英寸</p>
                <p >4.0英寸以下</p>
            </div>            
        </li>
        <li>
            <span>网络:</span>
            <div>
                <p >全网通</p>
                <p >双4G</p>
                <p >移动4G</p>
                <p >联通4G</p>
                <p >电信4G</p>
            </div>
        </li>
        <li>
            <span>核心数:</span>
            <div>
                <p >十核</p>
                <p >八核</p>
                <p >双四核</p>
                <p >四核</p>
                <p >双核及以下</p>
            </div>
        </li>
        <li>
            <span>特性:</span>
            <div>
                <p >大屏幕</p>
                <p >双卡双待</p>
                <p >指纹识别</p>
                <p >千元机</p>
                <p >拍照神器</p>
            </div>
        </li>
        <li class="choose">
            <span>您已选择:</span>
            <!--<p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>-->
            <span class="qc">清除全部筛选结果</span>
        </li>
    </ul>
</body>

</html>
<script>

    $('div p').click(function(){
        var p = $(this)
        var ali = $(this).parentsUntil('li')
     console.log(ali.parent())
      
        if(ali.attr('class') !== 'on'){
            
            $('.choose').append('<p>'+$(this).text()+'<b>'+'&times;'+'</b>'+'</p>')
            $(this).addClass('clicked').siblings().removeClass('clicked')
            // $('.clicked').css({'background':'#f62','color':'snow'})
            ali.addClass('on')
        }else{
            $('.choose p').html($(this).text()+'<b>'+'&times;'+'</b>');
            $(this).addClass('clicked').siblings().removeClass('clicked')
            // $('div p').css({'background':'#fff','color':'#305bb9'})
            // $('.clicked').css({'background':'#f62','color':'snow'})
        }
        // 点下方清除选项
        $('.choose p').click(function(){
        $(this).hide()
        ali.removeClass('on')
       $('p').removeClass('clicked')
       clear()
    })
      clear()
    })



    // 清除
    function clear(){

        var num = $('.choose p').length;
        if(num>0){
            $('.qc').css('display','inline-block')
        }else{
            $('.qc').hide()
        }
        $('.qc').click(function(){
            $('div').removeClass('on')
            $('div p').removeClass('clicked')
            $('.choose p').remove();
            $(this).hide()
        })
    }

    
</script>